<template>
  <div class="gl_mt_15">
    <div v-if="isPageLoading" class="page_loading fixed">
      <van-loading size="24px" vertical color="#fff">加载中...</van-loading>
    </div>
    <div v-if="messageList.length > 0">
      <van-cell-group class="search">
        <van-field v-model="Api_GET_MessageGetReceiveMessagesByContentQO.content" placeholder="输入标题/内容查询" style="width:100%" clearable @blur="search()">
          <template #right-icon><van-icon name="search" size="30" color="#1989fa" /></template>
        </van-field>
      </van-cell-group>
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text=""
          error-text=""
          :error.sync="error"
          @load="getMessageList"
        >
          <template v-for="(item, index ) in messageList">
            <van-cell :key="index">
              <div class="box" @click="toDetail(item.messageID, item.title)">
                <van-row type="flex" justify="space-between">
                  <van-col class="content" span="20">{{ item.title }}</van-col>
                  <van-col class="arrow" align="right" span="4"><van-icon name="arrow" /></van-col>
                </van-row>
                <p class="gl_fs_12">
                  <span>{{ item.createTime | FormatDate('yyyy-MM-dd HH:mm:ss') }}</span>
                </p>
              </div>
            </van-cell>
          </template>
        </van-list>
      </van-pull-refresh>
    </div>
    <div v-else>
      <van-empty description="暂无数据" />
    </div>
  </div>
</template>
<script>
import { api_GET_MessageGetReceiveMessagesByContent } from '@/extend/api/swaggerApi/chat.js';
import { Api_GET_MessageGetReceiveMessagesByContentQO } from '@/lib/form/swaggerForm';

export default {
  name: 'System',
  data() {
    return {
      Api_GET_MessageGetReceiveMessagesByContentQO: new Api_GET_MessageGetReceiveMessagesByContentQO(),
      // 是否处于加载状态
      loading: false,
      totalPage: 0,
      currentPage: 1,
      isPageLoading: false,
      messageList: [],
      // 是否已经加载完成
      finished: false,
      refreshing: false,
      // 是否加载失败
      error: false,
      gameId: ''
    };
  },
  created() {
    this.getMessageList();
    this.gameId = this.$route.params.id;
  },
  methods: {
    // 获取消息列表
    getMessageList() {
      this.finished = false;
      this.isPageLoading = true;
      if (this.refreshing) {
        this.messageList = [];
        this.refreshing = false;
        this.Api_GET_MessageGetReceiveMessagesByContentQO.Page = 1;
      }
      this.Api_GET_MessageGetReceiveMessagesByContentQO.SkipCount = (this.Api_GET_MessageGetReceiveMessagesByContentQO.Page - 1) * this.Api_GET_MessageGetReceiveMessagesByContentQO.MaxResultCount;
      api_GET_MessageGetReceiveMessagesByContent(this.Api_GET_MessageGetReceiveMessagesByContentQO).then(res => {
        this.isPageLoading = false;
        var _data = res.items || [];
        var _total = res.totalCount;
        this.messageList = this.messageList.concat(_data);
        this.loading = false;
        if (_total > this.messageList.length) {
          this.Api_GET_MessageGetReceiveMessagesByContentQO.Page += 1;
        } else {
          this.finished = true;
        }
      }).catch(res => {
        this.error = true;
        this.loading = false;
        this.isPageLoading = false;
      });
    },
    search() {
      this.isPageLoading = true;
      this.messageList = [];
      this.Api_GET_MessageGetReceiveMessagesByContentQO.Page = 1;
      this.Api_GET_MessageGetReceiveMessagesByContentQO.SkipCount = (this.Api_GET_MessageGetReceiveMessagesByContentQO.Page - 1) * this.Api_GET_MessageGetReceiveMessagesByContentQO.MaxResultCount;
      api_GET_MessageGetReceiveMessagesByContent(this.Api_GET_MessageGetReceiveMessagesByContentQO).then(res => {
        this.isPageLoading = false;
        this.messageList = res.items;
        this.loading = false;
        this.refreshing = true;
      }).catch(res => {
        this.error = true;
        this.loading = false;
        this.refreshing = true;
        this.isPageLoading = false;
      });
    },
    toDetail(id, name) {
      this.$router.push({
        path: `/myCenter${this.gameId && '/' + this.gameId || ''}/notice/detail`,
        query: {
          id: id,
          title: name
        }
      });
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.getMessageList();
    }
  }
};
</script>
<style scoped>
.search {
  width: 90%;
  border: 1px solid #dbdbdb;
  margin: 0 auto;
}
.box {
	border: 1px solid #dbdbdb;
	padding: 5px 15px;
  border-radius: 5px;
  color: #666666;
}
.content {
  max-width: 240px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-height: 16px;
  overflow: hidden;
  color: #333333;
  font-size: 14px;
  font-weight: 500;
}
.arrow {
	font-size: 18px;
  line-height: 18px;
  padding-top: 8px;
}
.van-cell::after {
	border: none;
}
</style>
